<template>
    <div>
        <div>
            <el-form :inline="true" size="mini">
                <el-form-item label="标题">
                    <el-input v-model="search.title" size="mini" style="width:130px;"></el-input>
                </el-form-item>
                <el-form-item label="分类">
                     <el-cascader style="width:130px;" clearable
                     v-model="search.classify" :options="classify" :props="{ expandTrigger: 'hover' }" @change="handleChange"></el-cascader>
                    <!-- <el-input v-model="search.domain" size="mini" style="width:130px;"></el-input> -->
                </el-form-item>
                <el-form-item>
                    <div>
                        <el-button type="primary" @click="onSearch">搜索</el-button>
                        <el-button type="success" @click="$router.push('/article/create')">新增文章</el-button>
                    </div>
                </el-form-item>
            </el-form>
        </div>
        <div>
            <el-table :data="data" border style="width: 100%">
                <el-table-column type="index" label="#" width="50" align="center"></el-table-column>
                <el-table-column prop="title" label="标题"></el-table-column>
                <el-table-column label="文章分类" width="180" align="center">
                    <template slot-scope="scope">
                        <span>{{scope.row.parent.name}}</span>
                    </template>
                </el-table-column>
                <el-table-column prop="intro" label="摘要" align="center">
                    <template slot-scope="scope">
                        {{scope.row.intro.substring(0,25)}}
                    </template>
                </el-table-column>
                <!-- <el-table-column label="封面" align="center" width="80">
                    <template slot-scope="scope">
                        <p style="text-align: left;">
                            <img :src="scope.row.picture" alt="">
                        </p>
                    </template>
                </el-table-column> -->
                <el-table-column label="是否原创" align="center" width="100">
                    <template slot-scope="scope">
                        <span v-if="scope.row.origin">
                            是
                        </span>
                    </template>
                </el-table-column>
                <el-table-column prop="create_time" label="提交时间" width="180" align="center"></el-table-column>
                <el-table-column label="操作" width="180px" align="center">
                    <template slot-scope="scope">
                        <el-button type="primary" @click="$router.push({path: '/article/edit',query: {id: scope.row.id}})" size="mini">编辑</el-button>
                        <el-button type="danger" @click="onDel(scope.row)" size="mini">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <div style="text-align: right;margin: 15px auto;">
                <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="p"
                    :page-sizes="[10,15, 20, 30, 40]"
                    :page-size="limit"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="total"></el-pagination>
            </div>
        </div>
    </div>
</template>

<script>
import {axget,axpost} from '@/components/api/index'
export default {
    data(){
        return {
            loading: false,
            data: [],
            total: 0,
            p:1,
            limit: 15,
            search: {
                title: '',
                classify: ''
            },
            classify:[]
        }
    },
    created(){
        this.getClassify()
        this.onLoad()
    },
    methods:{
        onLoad(){
            this.getList({
                p: this.p,
                limit: this.limit,
                search: this.search
            })
        },
        onSearch(){
            let param = {
                title: this.search.title,
                pid: ''
            }
            if(this.search.classify.length > 0){
                param.pid = this.search.classify[this.search.classify.length - 1]
            }
            this.getList({
                p: 1,
                limit: this.limit,
                search: param
            })
        },
        getList(where){
            this.loading = true

            axpost('/articles',where).then(res=>{
                if(res){
                    this.data = res.list
                    this.total = res.total
                }
                this.loading = false
            })
        },
        getClassify(){
            axpost('/articles/classify',[]).then(res=>{
                this.classify = res
            })
        },
        handleChange(val){
            // console.log(val)
        },
        onEdit(row){
            //
        },
        onDel(row){
            this.$confirm('确认删除, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                this.loading = true
                axpost('/articles/remove',{id:row.id}).then(res => {
                    let data = res.data
                    if(res.status === 200 && data.status === 200){
                        this.$message.success('删除成功')
                        this.onLoad()
                    }else{
                        this.$message.warning('删除失败')
                    }
                    this.loading = false
                })
            }).catch(r=>{})
            
        },
        handleCurrentChange(val){
            this.p = val
            this.onLoad()
        },
        handleSizeChange(val){
            this.limit = val
            this.onLoad()
        }
    }
}
</script>